<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{pluResPath}}html/gobang/gobang.css"
    />
    <link rel="preload" href="{{resPath}}font/tttgbnumber.ttf" as="font" />
    <link rel="preload" href="{{pluResPath}}img/gobang/bg.png" as="image" />
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <div class="container" id="container">
      <div class="hindex">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span
        ><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span
        ><span>11</span><span>12</span><span>13</span><span>14</span
        ><span>15</span>
      </div>
      <div class="hindex1">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span
        ><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span
        ><span>11</span><span>12</span><span>13</span><span>14</span
        ><span>15</span>
      </div>
      <div class="vindex">
        <p>A</p>
        <p>B</p>
        <p>C</p>
        <p>D</p>
        <p>E</p>
        <p>F</p>
        <p>G</p>
        <p>H</p>
        <p>I</p>
        <p>J</p>
        <p>K</p>
        <p>L</p>
        <p>M</p>
        <p>N</p>
        <p>O</p>
      </div>
      <div class="vindex1">
        <p>A</p>
        <p>B</p>
        <p>C</p>
        <p>D</p>
        <p>E</p>
        <p>F</p>
        <p>G</p>
        <p>H</p>
        <p>I</p>
        <p>J</p>
        <p>K</p>
        <p>L</p>
        <p>M</p>
        <p>N</p>
        <p>O</p>
      </div>
      <canvas id="canvas" width="480" height="480"></canvas>
    </div>
  </body>
  <script type="text/javascript">
    const data = JSON.parse(`{{@ gobangData}}`);
    const { state, current } = data;
    var p = document.getElementById("order");
    var canvas = document.querySelector("#canvas");
    var context = canvas.getContext("2d");

    const shift = 12;

    const width = 31.5;

    function init() {
      // context.beginPath();
      //画棋盘
      // context.beginPath();
      // for (var i = 1; i < 16; i++) {
      //   context.moveTo(width * i - shift, width - shift);
      //   context.lineTo(width * i - shift, width * 15 - shift);
      // }
      // for (var i = 1; i < 16; i++) {
      //   context.moveTo(width - shift, width * i - shift);
      //   context.lineTo(width * 15 - shift, width * i - shift);
      // }
      // context.stroke();
      // 画棋点
      drawRect(width * 8 - (shift + 2.3), width * 8 - (shift + 2.3), 5);
      drawRect(width * 4 - (shift + 2.2), width * 4 - (shift + 1.5), 5);
      drawRect(width * 12 - (shift + 2.2), width * 4 - (shift + 1.5), 5);
      drawRect(width * 4 - (shift + 2.2), width * 12 - (shift + 2.2), 5);
      drawRect(width * 12 - (shift + 2.2), width * 12 - (shift + 2.2), 5);

      // 初始化已落点位置
      for (var i = 0; i < state.length; i++) {
        for (var j = 0; j < state[i].length; j++) {
          if (state[i][j] !== -1) {
            const w = (i + 1) * width - shift;
            const h = (j + 1) * width - shift;
            drawChess(w, h, state[i][j], 14);
            draw(w, h, 14);
            if (current.x == i && current.y == j) {
              drawDh(w - 5, h, 10);
            }
          }
        }
      }
    }

    //画空心圆
    function draw(x, y, r) {
      context.beginPath();
      context.arc(x, y, r, 0, Math.PI * 2);
      context.fill();
    }

    function drawRect(x, y, r) {
      context.beginPath();
      context.fillRect(x, y, r, r);
      context.fill();
    }

    function drawDh(x, y, r) {
      context.beginPath();

      context.moveTo(x, y);
      context.lineTo(x + r, y);
      context.lineWidth = 2;
      context.strokeStyle = "grey";

      context.stroke();
      context.beginPath();
      context.moveTo(x + r / 2, y - r / 2);
      context.lineTo(x + r / 2, y + r / 2);
      context.lineWidth = 2;
      context.strokeStyle = "grey";

      context.stroke();
    }

    function drawChess(x, y, c, r) {
      if (c == 0) {
        context.fillStyle = "black";
      } else {
        context.fillStyle = "white";
      }
      context.fillStyle = c;
      context.beginPath();
      context.arc(x, y, r, 0, Math.PI * 2);
      context.fill();
    }
    init();
  </script>
</html>
